<template>
  <div class="page flex-col">
    <div class="bd1 flex-col">
      <div class="outer3 flex-col">
        <div
          class="section1 flex-col"
          v-for="(item, index) in loopData0"
          :key="index"
        >
          <div class="mod1 flex-col">
            <div class="box1 u-flex u-row-between">
              <span class="word2" v-html="item.lanhutext0"></span>
              <div class="bd2 flex-col">
                <span class="word3" v-html="item.lanhutext1"></span>
              </div>
            </div>
            <div class="box2 flex-col">
              <div class="mod2 u-flex u-row-between">
                <div class="outer4 flex-col justify-between">
                  <span class="info1" v-html="item.lanhutext2"></span>
                  <span class="txt2" v-html="item.lanhutext3"></span>
                </div>
                <img
                  class="label3"
                  referrerpolicy="no-referrer"
                  :src="item.lanhuimage0"
                />
              </div>
            </div>
            <div class="box3 u-flex u-row-between">
              <span
                class="word4"
                :style="{ color: item.lanhufontColor4 }"
                v-html="item.lanhutext4"
              ></span>
              <span class="info2" v-html="item.lanhutext5"></span>
            </div>
          </div>
          <div class="mod3 flex-col"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [
        {
          lanhutext0: '您D237393323已发货',
          lanhutext1: '订单',
          lanhutext2: '您购买的现摘红富士新鲜水…',
          lanhutext3: '去查看物流信息',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng037176ac7a1a4b1cc83c2d81f60635787bee197e7e2967d5f81b5dce4247bc1a',
          lanhutext4: '已读',
          lanhufontColor4: 'rgba(170,170,170,1)',
          lanhutext5: '22/01/02',
        },
        {
          lanhutext0: '您D237393323已发货',
          lanhutext1: '订单',
          lanhutext2: '您购买的现摘红富士新鲜水…',
          lanhutext3: '去查看物流信息',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng037176ac7a1a4b1cc83c2d81f60635787bee197e7e2967d5f81b5dce4247bc1a',
          lanhutext4: '未读',
          lanhufontColor4: 'rgba(250,108,62,1)',
          lanhutext5: '22/01/02',
        },
        {
          lanhutext0: '您D237393323已发货',
          lanhutext1: '订单',
          lanhutext2: '您购买的现摘红富士新鲜水…',
          lanhutext3: '去查看物流信息',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng037176ac7a1a4b1cc83c2d81f60635787bee197e7e2967d5f81b5dce4247bc1a',
          lanhutext4: '未读',
          lanhufontColor4: 'rgba(250,108,62,1)',
          lanhutext5: '22/01/02',
        },
      ],
      constants: {},
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>

.bd1 {
  width: 359px;
  height: 526px;
  margin: 15px 0 0 8px;
}
.outer1 {
  width: 340px;
  height: 18px;
  margin-left: 13px;
}
.word5 {
  width: 54px;
  height: 18px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 15px;
  letter-spacing: -0.30000001192092896px;
  font-family: Helvetica;
  white-space: nowrap;
  line-height: 18px;
  text-align: center;
}
.icon2 {
  width: 17px;
  height: 11px;
  margin: 3px 0 0 219px;
}
.mod4 {
  width: 16px;
  height: 11px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb3bbe96fea0140cfc24043ebc96677b3c6566f6cd0b99cb137439fb58271c764)
    0px 0px no-repeat;
  margin: 3px 0 0 5px;
}
.label4 {
  width: 25px;
  height: 12px;
  margin: 2px 0 0 4px;
}
.outer2 {
  width: 215px;
  height: 18px;
  margin: 26px 0 0 1px;
}
.icon3 {
  width: 18px;
  height: 18px;
}
.word1 {
  width: 72px;
  height: 18px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 18px;
  font-family: SourceHanSansCN-Medium;
  white-space: nowrap;
  line-height: 18px;
  text-align: left;
}
.outer3 {
  width: 359px;
  height: 449px;
  margin-top: 15px;
  justify-content: space-between;
}
.section1 {
  z-index: 3;
  height: 143px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1);
  margin-bottom: 10px;
  width: 359px;
  position: relative;
}
.mod1 {
  width: 344px;
  height: 122px;
  margin: 13px 0 0 15px;
}
.box1 {
  width: 344px;
  height: 20px;
}
.word2 {
  width: 155px;
  height: 16px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(132, 132, 132, 1);
  font-size: 16px;
  font-family: SourceHanSansCN-Regular;
  white-space: nowrap;
  line-height: 16px;
  text-align: left;
  margin-top: 1px;
}
.bd2 {
  height: 20px;
  border-radius: 10px 0 0 10px;
  background-color: rgba(87, 212, 241, 1);
  width: 37px;
}
.word3 {
  width: 24px;
  height: 12px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  white-space: nowrap;
  line-height: 12px;
  text-align: left;
  margin: 4px 0 0 8px;
}
.box2 {
  height: 65px;
  border-radius: 0 2px 2px 0;
  background-color: rgba(244, 248, 251, 1);
  width: 277px;
  margin: 12px 0 0 52px;
}
.mod2 {
  width: 235px;
  height: 39px;
  margin: 13px 0 0 28px;
}
.outer4 {
  width: 208px;
  height: 39px;
}
.info1 {
  width: 208px;
  height: 16px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(1, 1, 3, 1);
  font-size: 16px;
  font-family: SourceHanSansCN-Regular;
  white-space: nowrap;
  line-height: 16px;
  text-align: left;
}
.txt2 {
  width: 112px;
  height: 16px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(1, 1, 3, 1);
  font-size: 16px;
  font-family: SourceHanSansCN-Regular;
  white-space: nowrap;
  line-height: 16px;
  text-align: left;
  margin-top: 7px;
}
.label3 {
  width: 10px;
  height: 10px;
  margin-top: 15px;
}
.box3 {
  width: 334px;
  height: 17px;
  margin-top: 8px;
}
.word4 {
  width: 24px;
  height: 17px;
  display: block;
  overflow-wrap: break-word;
  font-size: 12px;
  white-space: nowrap;
  line-height: 17px;
  text-align: left;
}
.info2 {
  width: 53px;
  height: 17px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 12px;
  white-space: nowrap;
  line-height: 17px;
  text-align: left;
}
.mod3 {
  z-index: 10;
  position: absolute;
  left: 15px;
  top: 30px;
  width: 65px;
  height: 65px;
  border-radius: 2px 0 0 2px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng058dc0d59a6778d1e95bbe15368358d03271f734aeeaaac59b0d5c1216bcced9)
    100% no-repeat;
}
</style>
